<template>
    <div>
        <card>
            <!--<Row class="form-row">
                <Form :model="filters" label-position="right" :label-width="90" inline ref="formInline">
                    <FormItem>
                        <Button type="primary" icon="ios-search" @click="handleQuery('formInline')">搜索</Button>
                    </FormItem>
                </Form>
            </Row>-->

            <el-table stripe border :loading="tableLoading" :data="tableData" ref="table" style="width: 100%">
                <template slot="empty">暂无数据</template>
                <el-table-column prop="gzhAppName" label="公众号名称"></el-table-column>
                <el-table-column prop="pic1" label="tab1图片">
                    <template slot-scope="scope">
                        <img :src="scope.row.pic1" min-width="70" height="70"/>
                    </template>
                </el-table-column>
                <el-table-column prop="pic2" label="tab2图片">
                    <template slot-scope="scope">
                        <img :src="scope.row.pic2" min-width="70" height="70"/>
                    </template>
                </el-table-column>
                <el-table-column prop="titles" label="应用">

                </el-table-column>
                <el-table-column prop="url" label="社区服务首页链接地址"></el-table-column>
                <el-table-column label="操作" width="150px" align="center">
                    <template slot-scope="scope">
                        <Button size="mini" type="primary" @click="wechat(scope.row)">配置</Button>
                    </template>
                </el-table-column>
            </el-table>

            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  id="lyPage"
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </card>

        <!--微信配置相关-->
        <Modal v-model="wechatModel" title="微信配置" class="modal-content" width="620" :mask-closable="false">
            <Form ref="wechatForm" label-position="right" :label-width="140">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="tab1" name="first">
                        <FormItem style="display: none;">
                            <input type="hidden" name="housingId" v-model="wechatInfo.housingId"/>
                        </FormItem>
                        <FormItem label="tab1图片">
                            <el-upload @click.native=PicOne(picName)
                                       accept="image/jpeg,image/jpg,image/png"
                                       ref="upload"
                                       class="avatar-uploader"
                                       :headers="{'x-access-token':token}"
                                       :action="act"
                                       :show-file-list="false"
                                       :data="PicOneUrl"
                                       :on-success="handleAvatarSuccess1"
                                       :before-upload="beforeAvatarUpload1">
                                <img v-if="wechatInfo.img1" v-bind:src="wechatInfo.img1" class="avatar-oneImg">
                                <i v-else class="el-icon-plus avatar-uploader-icon-oneImg"></i>
                            </el-upload>
                            <p>建议尺寸为750 X 340px,支持jpg,jpeg,png格式</p>
                            <input type="hidden" name="loginPic" v-model="wechatInfo.img1"/>
                        </FormItem>
                        <FormItem label="应用列表">
                            <el-checkbox-group v-model="wechatInfo.select" :min="0">
                                <el-checkbox v-for="app in tabOneList" :label="app.id">{{app.title}}
                                </el-checkbox>
                            </el-checkbox-group>
                        </FormItem>

                    </el-tab-pane>
                    <el-tab-pane label="tab2" name="second">
                        <FormItem label="tab2图片">
                            <el-upload @click.native=PicTwo(picName)
                                       accept="image/jpeg,image/jpg,image/png"
                                       ref="upload"
                                       class="avatar-uploader"
                                       :headers="{'x-access-token':token}"
                                       :action="act"
                                       :show-file-list="false"
                                       :data="PicTwoUrl"
                                       :on-success="handleAvatarSuccess2"
                                       :before-upload="beforeAvatarUpload2">
                                <img v-if="wechatInfo.img2" v-bind:src="wechatInfo.img2" class="avatar-oneImg">
                                <i v-else class="el-icon-plus avatar-uploader-icon-oneImg"></i>
                            </el-upload>
                            <p>建议尺寸为750 X 340px,支持jpg,jpeg,png格式</p>
                            <input type="hidden" name="loginPic" v-model="wechatInfo.img2"/>
                        </FormItem>
                        <FormItem label="应用列表">
                            <el-checkbox-group v-model="wechatInfo.select" :min="0">
                                <el-checkbox v-for="app in tabTwoList" :label="app.id">{{app.title}}
                                </el-checkbox>
                            </el-checkbox-group>
                        </FormItem>
                    </el-tab-pane>
                </el-tabs>
            </Form>
            <div slot="footer">
                <Button type="text" @click="onCancel">取消</Button>
                <Button type="primary" size="large" @click="yesWechat" :loading="formLoading">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import baseURL from '_conf/url'
    import Cookies from "js-cookie";
    import {TOKEN_KEY} from "@/libs/util";

    const token = Cookies.get(TOKEN_KEY);
    const act = baseURL + "/common/uploadImg";
    //获取小区
    let gethouse = function () {
        let url = "/api/housing/getHousingByLogin";
        this.postRequest(url).then(res => {
            this.houseList = res;
        });
    };

    //加载数据
    let loadData = function () {
        if (this.tableLoading) {
            return;
        }
        this.tableLoading = true;
        let params = this.filters;
        params.pageNum = this.pageNum;
        params.pageSize = this.pageSize;
        //与后台交换数据
        this.postRequest("/api/h5AppConfig/loadData", params).then(res => {
            this.tableLoading = false;
            if (res.code == 20000) {
                this.tableData = res.data.list;
                this.pageTotal = res.data.total;
            } else {
                this.tableData = [];
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    };

    let onCancel = function () {
        this.formLoading = false;
        this.formVisible = false;
        this.wechatModel = false;
    };

    export default {
        data() {
            return {
                pageNum: 1,
                pageSize: 10,
                pageTotal: 0,
                tableData: [],
                token: token,
                tableLoading: false,
                wechatModel: false,
                formLoading: false,
                filters: {
                    housingId: '',
                },
                houseList: [],
                wechatInfo: {},
                act: act,
                activeName: 'first',
                tabOneList: [],
                tabTwoList: [],
                picName: '',
                PicOneUrl: {},
                PicTwoUrl: {},
            };
        },
        methods: {
            gethouse,
            loadData,
            onCancel,
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
            //查询
            handleQuery(name) {
                this.loadData();
            },
            //微信配置
            wechat(row) {
                this.wechatModel = true;
                this.getRequest("/api/h5AppConfig/openCategoryConfig?appId=" + row.gzhAppId).then(res => {
                    if (res.code == 20000) {
                        this.wechatInfo = res.data;
                        this.picName = row.gzhAppName;
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });

            },
            //加载tab应用列表
            loadtab: function () {
                this.postRequest("/api/categoryConfig/getData?typeInt=1").then(res => {
                    if (res.code == 20000) {
                        this.tabOneList = res.data;
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
                this.postRequest("/api/categoryConfig/getData?typeInt=2").then(res => {
                    if (res.code == 20000) {
                        this.tabTwoList = res.data;
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            handleClick(tab, event) {
                // console.log(tab, event);
            },
            //命名type1
            PicOne: function (name) {
                if (!name) {
                    this.$Message.warning('出错！');
                    return
                } else {
                    this.PicOneUrl = {
                        fileName: "deptImage/"+name+"_type1"
                    }
                }
            },
            //命名type2
            PicTwo: function (name) {
                if (!name) {
                    this.$Message.warning('出错！');
                    return
                } else {
                    this.PicTwoUrl = {
                        fileName: "deptImage/"+name+"_type2"
                    }
                }
            },
            beforeAvatarUpload1(file) {
                const isSize = new Promise(function (resolve, reject) {
                    let _URL = window.URL || window.webkitURL;
                    let img = new Image();
                    img.onload = function () {
                        let valid = img.width <= 750 && img.height <= 340;
                        valid ? resolve() : reject();
                    }
                    img.src = _URL.createObjectURL(file);
                }).then(() => {
                    return file;
                }, () => {
                    this.$Message.info({
                        content: '图片长宽不能大于750X340',
                        duration: 5,
                        closable: true
                    });
                    return Promise.reject();
                });
                return isSize;
            },
            beforeAvatarUpload2(file) {
                const isSize = new Promise(function (resolve, reject) {
                    let _URL = window.URL || window.webkitURL;
                    let img = new Image();
                    img.onload = function () {
                        let valid = img.width <= 750 && img.height <= 340;
                        valid ? resolve() : reject();
                    }
                    img.src = _URL.createObjectURL(file);
                }).then(() => {
                    return file;
                }, () => {
                    this.$Message.info({
                        content: '图片长宽不能大于750X340',
                        duration: 5,
                        closable: true
                    });
                    return Promise.reject();
                });
                return isSize;
            },
            handleAvatarSuccess1(res, file) {
                this.wechatInfo.img1 = res;
            },
            handleAvatarSuccess2(res, file) {
                this.wechatInfo.img2 = res;
            },
            //微信确认
            yesWechat() {
                this.postRequest("/api/h5AppConfig/saveCategoryConfig", this.wechatInfo).then(res => {
                    this.tableLoading = false;
                    if (res.code == 20000) {
                        this.formLoading = false;
                        this.wechatModel = false;
                        this.$Message.success("保存成功！");
                        this.loadData();
                    } else {
                        this.formLoading = false;
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });

            },
        },
        created: function () {
            this.gethouse();
            this.loadData();
            this.loadtab();
        },
    };
</script>
